<style type="text/css">
  .blog_list_default .blog_content ul {
    display: grid;
    grid-row-gap: 40px;
    grid-column-gap: 30px;
    grid-template-columns: repeat(3, 1fr);
  }
  .blog_list_default .blog_content li {
    text-align: center;
    list-style-type: none;
    overflow: hidden;
  }
  .blog_list_default .blog_content li .blog_pic {
    width: 100%;
    display: inline-block;
    margin-bottom: 30px;
  }
  .blog_list_default .blog_content li .blog_pic img {
    width: 100%;
  }

  .blog_list_default .blog_content li .blog_title {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--title_color);
    font-size: var(--product_font_size);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .blog_list_default .blog_content li .blog_time {
    color: #999;
    margin-top: 0.8rem;
  }

  .blog_list_default .blog_content li .blog_list_detail {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    color: var(--detail_color);
  }

  .blog_list_default .blog_content li .blog_read_more {
    display: inline-block;
    margin-top: 10px;
    text-decoration: underline;
    color: #557fbf;
  }

  .blog_list_default .blog_top_detail {
    margin-bottom: 20px;
  }
  .blog_list_default .blog_top_detail:empty {
    margin-bottom: 0;
  }

  .blog_list_default :is(.blog_top_detail, .blog_bottom_detail) {
    text-align: center;
  }

  @media screen and (max-width: 767px) {
    .blog_list_default .blog_content ul {
      grid-template-columns: repeat(1, calc(100%)) !important;
      grid-row-gap: 30px;
    }
    .blog_list_default .blog_content li .blog_pic {
      margin-bottom: 20px;
    }
  }
</style>

<div class="blog_list_default container_wrapper">
  <h1 class="title">{{ news_detail.title }}</h1>
  <div class="blog_top_detail">{{ news_detail.top_descript_oss_bucket }}</div>
  <div class="plugin-container-header"></div>

  <div class="blog_content">
    {% assign list_size = posts.list | size %}
    {% if list_size > 0 %}
      <ul>
        {% for item in posts.list %}
          {%- if item.image_alt == "" -%}
            {% assign article_alt = item | image_alt:'blog'   %}
          {%- else -%}
            {% assign article_alt = item.image_alt %}
          {%- endif -%}
          <li>
            <a class="blog_pic" href="/blogs/{{item.handle}}"
              ><img
                data-src="{{ item.src }}"
                src="{{ 'empty_loading.png' | public_asset_abs_url }}"
                alt="{{ article_alt }}"
            ></a>
            <a class="blog_title" href="/blogs/{{item.handle}}">{{ item.title }}</a>
            <div class="blog_list_detail">{{ item.descript }}</div>
          </li>
        {% endfor %}
      </ul>

      {% include pagination , { paginate : posts.paginate } %}
    {% else %}
      {% include 'empty', text: lang.blogs.list.empty %}
    {% endif %}
  </div>
  <div class="blog_bottom_detail">{{ news_detail.bottom_descript_oss_bucket }}</div>
  <div class="plugin-container-footer"></div>
</div>